<template>
  <div class="credit-task-system">
    <!-- 主内容区域 -->
    <div class="main-content">
      <div class="content-area">
        <h1 class="page-title">信用分任务列表</h1>
        <div class="page-description">信用分总分为10分</div>

        <!-- 搜索区域 -->
        <div class="search-form">
          <div class="form-row">
            <div class="form-item">
              <label class="form-label">输入关键词搜索</label>
              <input
                  type="text"
                  class="form-input"
                  v-model="searchForm.keyword"
                  placeholder="输入关键词搜索"
              >
            </div>
            <div class="form-item">
              <label class="form-label">创建时间</label>
              <div class="date-range">
                <input
                    type="date"
                    class="form-input"
                    v-model="searchForm.startDate"
                >
                <span class="date-separator">至</span>
                <input
                    type="date"
                    class="form-input"
                    v-model="searchForm.endDate"
                >
              </div>
            </div>
            <div class="form-item score-select">
              <label class="form-label">信用分</label>
              <select class="form-select" v-model="searchForm.score">
                <option value="">全部</option>
                <option value="1">1分</option>
                <option value="2">2分</option>
                <option value="3">3分</option>
                <option value="4">4分</option>
                <option value="5">5分</option>
              </select>
            </div>
            <!-- 按钮组 -->
            <div class="button-group">
              <button class="btn btn-primary" @click="handleSearch">
                <i class="fas fa-search"></i> 检索
              </button>
              <button class="btn btn-secondary" @click="handleReset">
                <i class="fas fa-redo"></i> 重置
              </button>
              <button class="btn btn-success" @click="showAddDialog">
                <i class="fas fa-plus"></i> 新增
              </button>
              <button class="btn btn-warning" @click="exportData">
                <i class="fas fa-download"></i> 导出
              </button>
            </div>
          </div>
        </div>

        <!-- 信用分任务列表 -->
        <div class="task-list">
          <div class="table-container">
            <table class="data-table">
              <thead>
              <tr>
                <th><input type="checkbox" class="table-checkbox"></th>
                <th>信用分标题</th>
                <th>信用分</th>
                <th>图标</th>
                <th>创建时间</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="task in paginatedData" :key="task.id">
                <td><input type="checkbox" class="table-checkbox"></td>
                <td>{{ task.title }}</td>
                <td>
                  <span class="score-value">{{ task.score }}</span>
                </td>
                <td>
                  <i :class="task.icon"></i>
                </td>
                <td>{{ task.createTime }}</td>
                <td>
                  <div class="status-switch" :class="task.status === 'active' ? 'active' : 'inactive'">
                    <span class="switch-label">{{ task.status === 'active' ? '启用' : '停用' }}</span>
                    <div class="switch-button" @click="toggleTaskStatus(task)">
                      <div class="switch-knob"></div>
                    </div>
                  </div>
                </td>
                <td>
                  <button class="btn btn-text" @click="editTask(task)">
                    <i class="fas fa-edit"></i> 编辑
                  </button>
                </td>
              </tr>
              </tbody>
            </table>

            <!-- 分页控件 -->
            <div class="pagination-container">
              <div class="pagination-info">
                共 {{ pagination.total }} 条记录
              </div>
              <div class="pagination-controls">
                <select class="page-size-select" v-model="pagination.pageSize" @change="handleSizeChange">
                  <option value="10">10条/页</option>
                  <option value="20">20条/页</option>
                  <option value="50">50条/页</option>
                </select>

                <button
                    class="pagination-btn"
                    :disabled="pagination.currentPage === 1"
                    @click="handlePageChange(pagination.currentPage - 1)"
                >
                  &lt;
                </button>

                <div class="page-numbers">
                  <button
                      v-for="page in visiblePages"
                      :key="page"
                      class="page-number"
                      :class="{ active: page === pagination.currentPage }"
                      @click="handlePageChange(page)"
                  >
                    {{ page }}
                  </button>
                </div>

                <button
                    class="pagination-btn"
                    :disabled="pagination.currentPage === totalPages"
                    @click="handlePageChange(pagination.currentPage + 1)"
                >
                  &gt;
                </button>

                <span class="page-jump">前往</span>
                <input type="number" class="page-input" v-model="pageJump" min="1" :max="totalPages">
                <span class="page-jump">页</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 信用分设置弹窗 -->
    <div v-if="creditSettingDialogVisible" class="modal-overlay" @click.self="hideCreditSettingDialog">
      <div class="modal-content credit-setting-dialog" @click.stop>
        <div class="modal-header">
          <h3 class="modal-title">编辑-信用分设置</h3>
          <button class="modal-close" @click="hideCreditSettingDialog">×</button>
        </div>

        <div class="modal-body">
          <div class="credit-setting-form">
            <div class="form-section">
              <div class="form-row">
                <div class="form-item">
                  <label class="form-label">信用分标题</label>
                  <input
                      type="text"
                      class="form-input"
                      v-model="currentCreditSetting.title"
                      placeholder="请输入内容"
                      maxlength="8"
                  >
                  <p class="form-tip">文字内容不超过8个字</p>
                </div>
              </div>

              <div class="form-row">
                <div class="form-item">
                  <label class="form-label">信用分</label>
                  <input
                      type="number"
                      class="form-input"
                      v-model="currentCreditSetting.score"
                      placeholder="请输入整数"
                  >
                </div>
              </div>

              <div class="form-row">
                <div class="form-item">
                  <label class="form-label">信用分任务内容</label>
                  <div class="task-content-list">
                    <div class="task-content-item" v-for="(item, index) in currentCreditSetting.taskContents" :key="index">
                      <i class="fas fa-bars"></i>
                      <span>{{ item }}</span>
                    </div>
                    <button class="btn btn-text add-task-btn" @click="addTaskContent">
                      <i class="fas fa-plus"></i>
                    </button>
                  </div>
                </div>
              </div>

              <div class="form-row">
                <div class="form-item">
                  <label class="form-label">图标</label>
                  <div class="icon-upload">
                    <button class="btn btn-outline">
                      <i class="fas fa-folder-open"></i> 浏览
                    </button>
                    <p class="upload-tip">可上传jpg/png/svg文件，且不超过500kb</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-primary" @click="saveCreditSetting">保存</button>
          <button class="btn btn-primary" @click="enableCreditSetting">启用</button>
        </div>
      </div>
    </div>

    <!-- 任务设置弹窗 -->
    <div v-if="taskSettingDialogVisible" class="modal-overlay" @click.self="hideTaskSettingDialog">
      <div class="modal-content task-setting-dialog" @click.stop>
        <div class="modal-header">
          <h3 class="modal-title">编辑</h3>
          <button class="modal-close" @click="hideTaskSettingDialog">×</button>
        </div>

        <div class="modal-body">
          <div class="task-setting-form">
            <div class="form-section">
              <div class="form-row">
                <div class="form-item">
                  <label class="form-label">任务类型</label>
                  <div class="radio-group">
                    <label class="radio-label">
                      <input
                          type="radio"
                          name="taskType"
                          value="text"
                          v-model="currentTaskSetting.type"
                      >
                      <span class="radio-text">文本输入</span>
                    </label>
                    <label class="radio-label">
                      <input
                          type="radio"
                          name="taskType"
                          value="time"
                          v-model="currentTaskSetting.type"
                      >
                      <span class="radio-text">时间选择</span>
                    </label>
                    <label class="radio-label">
                      <input
                          type="radio"
                          name="taskType"
                          value="image"
                          v-model="currentTaskSetting.type"
                      >
                      <span class="radio-text">上传图片</span>
                    </label>
                  </div>
                </div>
              </div>

              <div class="form-row">
                <div class="form-item">
                  <label class="form-label">任务标题</label>
                  <input
                      type="text"
                      class="form-input"
                      v-model="currentTaskSetting.title"
                      placeholder="请输入内容"
                  >
                </div>
              </div>

              <div class="form-row">
                <div class="form-item">
                  <label class="form-label">任务备注</label>
                  <textarea
                      class="form-textarea"
                      v-model="currentTaskSetting.remark"
                      placeholder="请输入内容"
                      rows="3"
                      maxlength="12"
                  ></textarea>
                  <p class="form-tip">文字内容不超过12个字</p>
                </div>
              </div>

              <div class="form-row">
                <div class="form-item">
                  <label class="form-label">任务是否必填</label>
                  <div class="radio-group">
                    <label class="radio-label">
                      <input
                          type="radio"
                          name="required"
                          value="yes"
                          v-model="currentTaskSetting.required"
                      >
                      <span class="radio-text">是</span>
                    </label>
                    <label class="radio-label">
                      <input
                          type="radio"
                          name="required"
                          value="no"
                          v-model="currentTaskSetting.required"
                      >
                      <span class="radio-text">否</span>
                    </label>
                  </div>
                </div>
              </div>

              <div class="form-row">
                <div class="form-item">
                  <label class="form-label">选择类型</label>
                  <div class="radio-group">
                    <label class="radio-label">
                      <input
                          type="radio"
                          name="selectionType"
                          value="range"
                          v-model="currentTaskSetting.selectionType"
                      >
                      <span class="radio-text">选择范围</span>
                    </label>
                    <label class="radio-label">
                      <input
                          type="radio"
                          name="selectionType"
                          value="fixed"
                          v-model="currentTaskSetting.selectionType"
                      >
                      <span class="radio-text">选择固定时间</span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-secondary" @click="hideTaskSettingDialog">取消</button>
          <button class="btn btn-primary" @click="saveTaskSetting">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'

export default {
  name: 'CreditTaskSystem',
  setup() {
    // 搜索表单数据
    const searchForm = reactive({
      keyword: '',
      startDate: '',
      endDate: '',
      score: ''
    })

    // 分页数据
    const pagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 0
    })

    const pageJump = ref(1)

    // 弹窗显示状态
    const creditSettingDialogVisible = ref(false)
    const taskSettingDialogVisible = ref(false)

    // 信用分设置数据
    const currentCreditSetting = ref({
      title: '',
      score: 0,
      taskContents: ['工作年限', '社保记录'],
      icon: ''
    })

    // 任务设置数据
    const currentTaskSetting = ref({
      type: 'image',
      title: '',
      remark: '',
      required: 'yes',
      selectionType: 'range'
    })

    // 模拟数据
    const tasks = ref([
      {
        id: 1,
        title: '填写毕业信息',
        score: 1,
        icon: 'fas fa-graduation-cap',
        createTime: '2025-01-08',
        status: 'active'
      },
      {
        id: 2,
        title: '身份信息上传',
        score: 1,
        icon: 'fas fa-id-card',
        createTime: '2025-01-08',
        status: 'active'
      },
      {
        id: 3,
        title: '填写工作经验',
        score: 5,
        icon: 'fas fa-briefcase',
        createTime: '2025-01-08',
        status: 'active'
      },
      {
        id: 4,
        title: '填写离职信息',
        score: 1,
        icon: 'fas fa-sign-out-alt',
        createTime: '2025-01-08',
        status: 'active'
      },
      {
        id: 5,
        title: '技能证书上传',
        score: 2,
        icon: 'fas fa-certificate',
        createTime: '2025-01-08',
        status: 'active'
      },
      {
        id: 6,
        title: '技能证书上传',
        score: 2,
        icon: 'fas fa-certificate',
        createTime: '2025-01-08',
        status: 'active'
      },
      {
        id: 7,
        title: '技能证书上传',
        score: 2,
        icon: 'fas fa-certificate',
        createTime: '2025-01-08',
        status: 'active'
      },
      {
        id: 8,
        title: '技能证书上传',
        score: 2,
        icon: 'fas fa-certificate',
        createTime: '2025-01-08',
        status: 'active'
      },
      {
        id: 9,
        title: '技能证书上传',
        score: 2,
        icon: 'fas fa-certificate',
        createTime: '2025-01-08',
        status: 'active'
      },
      {
        id: 10,
        title: '技能证书上传',
        score: 2,
        icon: 'fas fa-certificate',
        createTime: '2025-01-08',
        status: 'active'
      }
    ])

    // 计算属性
    const filteredData = computed(() => {
      let data = [...tasks.value]

      // 根据关键词筛选
      if (searchForm.keyword) {
        const keyword = searchForm.keyword.toLowerCase()
        data = data.filter(task =>
            task.title.toLowerCase().includes(keyword)
        )
      }

      // 根据分数筛选
      if (searchForm.score) {
        data = data.filter(task => task.score === parseInt(searchForm.score))
      }

      // 日期筛选
      if (searchForm.startDate && searchForm.endDate) {
        // 这里简化处理，实际应根据任务创建时间筛选
        data = data.filter(task => {
          return true
        })
      }

      pagination.total = data.length
      return data
    })

    const paginatedData = computed(() => {
      const startIndex = (pagination.currentPage - 1) * pagination.pageSize
      const endIndex = startIndex + pagination.pageSize
      return filteredData.value.slice(startIndex, endIndex)
    })

    const totalPages = computed(() => {
      return Math.ceil(pagination.total / pagination.pageSize)
    })

    const visiblePages = computed(() => {
      const pages = []
      const maxVisible = 5
      let start = Math.max(1, pagination.currentPage - Math.floor(maxVisible / 2))
      let end = Math.min(totalPages.value, start + maxVisible - 1)

      if (end - start < maxVisible - 1) {
        start = Math.max(1, end - maxVisible + 1)
      }

      for (let i = start; i <= end; i++) {
        pages.push(i)
      }

      return pages
    })

    // 方法
    const handleSearch = () => {
      pagination.currentPage = 1
    }

    const handleReset = () => {
      searchForm.keyword = ''
      searchForm.startDate = ''
      searchForm.endDate = ''
      searchForm.score = ''
      pagination.currentPage = 1
    }

    const handlePageChange = (page) => {
      if (page < 1 || page > totalPages.value || page === pagination.currentPage) return
      pagination.currentPage = page
    }

    const handleSizeChange = () => {
      pagination.currentPage = 1
    }

    const handlePageJump = () => {
      if (pageJump.value < 1) pageJump.value = 1
      if (pageJump.value > totalPages.value) pageJump.value = totalPages.value
      handlePageChange(pageJump.value)
    }

    const showAddDialog = () => {
      currentCreditSetting.value = {
        title: '',
        score: 0,
        taskContents: ['工作年限', '社保记录'],
        icon: ''
      }
      creditSettingDialogVisible.value = true
    }

    const editTask = (task) => {
      currentTaskSetting.value = { ...task }
      taskSettingDialogVisible.value = true
    }

    const hideCreditSettingDialog = () => {
      creditSettingDialogVisible.value = false
    }

    const hideTaskSettingDialog = () => {
      taskSettingDialogVisible.value = false
    }

    const toggleTaskStatus = (task) => {
      task.status = task.status === 'active' ? 'inactive' : 'active'
    }

    const addTaskContent = () => {
      currentCreditSetting.value.taskContents.push('新任务内容')
    }

    const saveCreditSetting = () => {
      if (!currentCreditSetting.value.title) {
        alert('请输入信用分标题')
        return
      }

      if (!currentCreditSetting.value.score) {
        alert('请输入信用分')
        return
      }

      alert('保存成功')
      hideCreditSettingDialog()
    }

    const enableCreditSetting = () => {
      alert('启用成功')
      hideCreditSettingDialog()
    }

    const saveTaskSetting = () => {
      if (!currentTaskSetting.value.title) {
        alert('请输入任务标题')
        return
      }

      alert('保存成功')
      hideTaskSettingDialog()
    }

    const exportData = () => {
      alert('导出功能待实现')
    }

    onMounted(() => {
      pagination.total = tasks.value.length
    })

    return {
      searchForm,
      pagination,
      pageJump,
      creditSettingDialogVisible,
      taskSettingDialogVisible,
      currentCreditSetting,
      currentTaskSetting,
      tasks,
      filteredData,
      paginatedData,
      totalPages,
      visiblePages,
      handleSearch,
      handleReset,
      handlePageChange,
      handleSizeChange,
      handlePageJump,
      showAddDialog,
      editTask,
      hideCreditSettingDialog,
      hideTaskSettingDialog,
      toggleTaskStatus,
      addTaskContent,
      saveCreditSetting,
      enableCreditSetting,
      saveTaskSetting,
      exportData
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

.credit-task-system {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.main-content {
  display: flex;
  flex-direction: column;
}

.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #303133;
}

.page-description {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.search-form {
  background: #fff;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 合并重复的.form-row样式 */
.form-row {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 20px;
}

/* 为不同区域的form-row添加特定样式 */
.search-form .form-row {
  flex-wrap: nowrap;
  align-items: flex-end;
  overflow-x: auto;
  padding-bottom: 10px;
}

.credit-setting-form .form-row,
.task-setting-form .form-row {
  margin-bottom: 15px;
}

/* 合并重复的.form-item样式 */
.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 为不同区域的form-item添加特定样式 */
.search-form .form-item {
  flex-shrink: 0;
  min-width: 150px;
}

.credit-setting-form .form-item,
.task-setting-form .form-item {
  flex: 1;
}

.form-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
}

.form-input, .form-select {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
  min-width: 120px;
}

/* 信用分选择框窄版样式 - 通过父容器定位 */
.search-form .score-select .form-select {
  min-width: 80px;
  width: auto;
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: #409eff;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-separator {
  color: #909399;
  font-size: 14px;
}

/* 按钮组样式 - 水平排列 */
.button-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.btn {
  padding: 8px 14px;
  margin: 0 8px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.btn-primary {
  background: #409eff;
  color: #fff;
}

.btn-primary:hover {
  background: #66b1ff;
}

.btn-secondary {
  background: #909399;
  color: #fff;
}

.btn-secondary:hover {
  background: #a6a9ad;
}

.btn-success {
  background: #67c23a;
  color: #fff;
}

.btn-success:hover {
  background: #85ce61;
}

.btn-warning {
  background: #e6a23c;
  color: #fff;
}

.btn-warning:hover {
  background: #ebb563;
}

.btn-text {
  background: transparent;
  color: #409eff;
}

.btn-text:hover {
  background: #ecf5ff;
}

.btn-outline {
  background: transparent;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.btn-outline:hover {
  background: #f5f7fa;
}

.task-list {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-container {
  padding: 0 20px 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.data-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #ebeef5;
  color: #606266;
}

.data-table tr:hover {
  background-color: #f5f7fa;
}

.table-checkbox {
  width: 16px;
  height: 16px;
}

.score-value {
  font-weight: 600;
  color: #409eff;
}

/* 状态开关样式 */
.status-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.switch-label {
  font-size: 14px;
  color: #606266;
}

.switch-button {
  width: 40px;
  height: 20px;
  background-color: #dcdfe6;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

.switch-button.active {
  background-color: #409eff;
}

.switch-knob {
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.3s;
}

.switch-button.active .switch-knob {
  left: 22px;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-top: 1px solid #ebeef5;
}

.pagination-info {
  font-size: 14px;
  color: #606266;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-size-select {
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.pagination-btn {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
  background: #f5f7fa;
}

.pagination-btn:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 5px;
}

.page-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.page-number:hover:not(.active) {
  background: #f5f7fa;
}

.page-number.active {
  background: #409eff;
  color: #fff;
  border-color: #409eff;
}

.page-jump {
  font-size: 14px;
  color: #606266;
}

.page-input {
  width: 50px;
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}

.credit-setting-dialog, .task-setting-dialog {
  width: 500px;
  max-width: 95vw;
  max-height: 95vh;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #909399;
}

.modal-close:hover {
  color: #606266;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
}

.credit-setting-form, .task-setting-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section {
  margin-bottom: 20px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.radio-text {
  font-size: 14px;
  color: #606266;
}

.form-textarea {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
  resize: vertical;
  min-height: 80px;
}

.form-textarea:focus {
  outline: none;
  border-color: #409eff;
}

.task-content-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-content-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #f5f7fa;
  border-radius: 4px;
}

.task-content-item i {
  color: #909399;
}

.add-task-btn {
  align-self: flex-start;
  padding: 6px;
}

.icon-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .button-group {
    flex-direction: column;
    min-width: auto;
  }

  .button-group .btn {
    justify-content: center;
  }

  .pagination-container {
    flex-direction: column;
    gap: 15px;
  }

  .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }

  .radio-group {
    flex-direction: column;
    gap: 10px;
  }
}
</style>